<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" class="k-content">

			<div id="shipping">
            <label for="input" class="info">Choose shipping countries:</label>

            <input id="input" />

            <div class="hint">Start typing the name of an European country</div>

			</div>

            <script>
                $(document).ready(function () {
                    var data = [
                            "Albania",
							"Andorra",
							"Armenia",
							"Austria",
							"Azerbaijan",
							"Belarus",
							"Belgium",
							"Bosnia & Herzegovina",
							"Bulgaria",
							"Croatia",
							"Cyprus",
							"Czech Republic",
							"Denmark",
							"Estonia",
							"Finland",
							"France",
							"Georgia",
							"Germany",
							"Greece",
							"Hungary",
							"Iceland",
							"Ireland",
							"Italy",
							"Kosovo",
							"Latvia",
							"Liechtenstein",
							"Lithuania",
							"Luxembourg",
							"Macedonia",
							"Malta",
							"Moldova",
							"Monaco",
							"Montenegro",
							"Netherlands",
							"Norway",
							"Poland",
							"Portugal",
							"Romania",
							"Russia",
							"San Marino",
							"Serbia",
							"Slovakia",
							"Slovenia",
							"Spain",
							"Sweden",
							"Switzerland",
							"Turkey",
							"Ukraine",
							"United Kingdom",
							"Vatican City"
                        ];

                    //create AutoComplete UI component
                    $("#input").kendoAutoComplete({
                        dataSource: data,
                        filter: "startswith",
                        placeholder: "Select country...",
                        separator: ", "
                    });
                });
            </script>
            <style scoped="scoped">
                .info {
                    display: block;
                    line-height: 22px;
                    padding: 0 5px 5px 0;
					color: #36558e;
                }

				#shipping {
					width: 482px;
					height: 152px;
					padding: 110px 0 0 30px;
					background: url('../../content/web/autocomplete/shipping.png') transparent no-repeat 0 0;
					margin: 30px auto;
 				}

                .k-autocomplete
                {
                    width: 250px;
					vertical-align: middle;
                }

                .hint {
                    line-height: 22px;
                    color: #aaa;
                    font-style: italic;
					font-size: .9em;
					color: #7496d4;
                }
            </style>
        </div>

</body>
</html>
